 /*
 * @description: app跳转链接
 * @Author: along
 * @Date: 2020-09-07
 * @Last Modified by: along
 * @Last Modified time: 2020-09-09
 */
<template>
    <div class="action actionTemplate">
        <el-form
            :model="ruleForm"
            ref="ruleForm"
            class="demo-ruleForm"
            label-width="100px"
        >
            <p
                class="demo-title"
                v-if="show"
            >跳转链接(需联系技术提供)</p>
            <el-form-item
                class="task-form-item"
                size="small"
            >
                <el-cascader
                    :props="{ expandTrigger: 'hover' }"
                    :placeholder="setJump"
                    size="small"
                    :filterable="true"
                    v-model="ruleForm.app_action"
                    :options="linkSelectData"
                    @change="handleChange()"
                    ref="myCascader"
                    class="action-cascader"
                    :style="{width: '323px'}"
                />
            </el-form-item>
            <el-form-item
                size="small"
            >
                <!-- 外链输入框 -->
                <div
                    v-for="(item,index) in param"
                    :key="index"
                >
                    <div v-if="item.type == 'text'">
                        <el-input
                            placeholder="请输入链接"
                            style="width: 323px"
                            v-model="ruleForm.jump_url"
                            @input="getJump"
                            clearable
                            class="_content_input"
                        >
                            <template
                                class="param"
                                slot="prepend">{{ item.title }}</template>
                        </el-input>
                        <!-- <p style="display:inline-block;color:#999;margin-left:12px">*需要联系技术提供</p> -->
                    </div>
                </div>
                <!-- 外链输入框 -->

                <!-- 内链选择框 -->
                <div
                    v-for="(item,index) in paramCont"
                    :key="index"
                >
                    <div
                        v-if="paramCont.length == 2 "
                        style="display:flex;marginBottom: 10px;width: 323px;"
                    >
                        <p class="el-select-title">{{ item.title }}</p>
                        <el-select
                            v-model="list[index]"
                            filterable
                            placeholder="请选择"
                            @change="getLink"
                            style="marginLeft: -5px;width:263px"
                            class="_content_select"
                        >
                            <el-option
                                v-for="item in options[index]"
                                :key="item.value"
                                :label="item.title"
                                :value="item.value"
                            />
                        </el-select>
                        <!-- <p style="display:inline-block;color:#999;margin-left:12px">*需要联系技术提供</p> -->
                    </div>
                    <div
                        v-if="item.type == 'select' && paramCont.length == 1 "
                        style="display:flex;marginBottom: 10px;width: 323px;"
                    >
                        <p class="el-select-title">{{ item.title }}</p>
                        <el-select
                            v-model="ruleForm.jump_url"
                            filterable
                            placeholder="请选择"
                            @change="getJump"
                            style="marginLeft: -5px;width:263px"
                            class="_content_select"
                        >
                            <el-option
                                v-for="item in options[index]"
                                :key="item.value"
                                :label="item.title"
                                :value="item.value"/>
                        </el-select>
                        <!-- <p style="display:inline-block;color:#999;margin-left:12px">*需要联系技术提供</p> -->
                    </div>
                    <div v-if="item.type == 'text'">
                        <el-input
                            placeholder="请输入链接"
                            style="width: 323px"
                            v-model="ruleForm.jump_url"
                            @input="getJump"
                            clearable
                            class="_content_input"
                        >
                            <template
                                class="param"
                                slot="prepend">{{ item.title }}</template>
                        </el-input>
                        <!-- <p style="display:inline-block;color:#999;margin-left:12px">*需要联系技术提供</p> -->
                    </div>
                </div>
                <!-- 内链输入框 -->
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: 'AppAction',
    props: {
        action: {
            type: String,
            default: ()=> {}
        },
        show: {
            type: Boolean,
            default: true
        },
        styles: {
            type: Object,
            default: () => {}
        }
    },
    data () {
        return {
            app_action: this.action,
            ruleForm: {
                app_action: '',
                jump_url: '',
                form_name: ''
            },
            setJump: '请选择',
            list: [],
            link: '',
            param: [],
            paramCont: [],
            options: [],
            linkSelectData: [],
            isapp: true
        };
    },
    mounted () {
        this.getappAcion();
        this.isapp = true;
        this.initAction(this.app_action);
    },
    methods: {
        /**
         * app行为数据处理
         */
        getappAcion () {
            let arr = [];
            let param = '';
            let val = '';

            this.$post('/student/app_action%5Cget_cascade_list', {
            }, resp => {
                if (resp.code == 1) {
                    resp.data.list.map((item,index)=>{
                        arr.push({
                            value: item.action,
                            label: item.title,
                            children: []
                        });
                        item.target_list.map((itm, idx) => {
                            val = {
                                target: itm.target,
                                param: []
                            };
                            itm.param_list.map((option,i)=> {
                                val.param.push({
                                    param: option.param,
                                    title: option.title,
                                    type: option.form_type
                                });
                            });
                            arr[index].children.push({
                                value: JSON.stringify(val),
                                label: itm.title
                            });
                        });
                    });
                }
                this.linkSelectData = arr;
            });
        },

        /**
         * app链接数据处理
         */
        handleChange () {
            let app_action = this.ruleForm.app_action;
            let obj = JSON.parse(app_action[1]);
            let link = {
                action: '',
                target: '',
                param: {}
            };
            let param = [];

            this.ruleForm.form_name = '';
            this.$set(this.ruleForm, 'jump_url', '');

            if (app_action[0] == 'app_page') { //内部链接
                let param_list = obj.param;

                this.param = this.paramCont = this.list = [];

                if (param_list.length == 1) {
                    for(let i in param_list) {
                        param.push(
                            param_list[i]
                        );
                    }
                    this.list = [''];
                } else if (param_list.length == 2) {
                    param_list.map(item=>{
                        param.push({
                            type: 'select',
                            param: item.param,
                            title: item.title,
                            target: obj['target']
                        });
                    });
                    this.list = ['',''];
                }

                this.paramCont = param;

                if (this.paramCont.length == 0) {
                    this.link = {
                        action: app_action[0],
                        target: JSON.parse(app_action[1]).target,
                        param: {}
                    };
                    this.$emit('action', JSON.stringify(this.link));
                    return;
                }

                this.options = [];
                this.paramCont.map((item,index)=>{
                    if (item.type == 'select') {
                        this.$post('/student/app_action%5Cget_param_item_list',{
                            action: 'app_page',
                            target: obj['target'],
                            param: item.param
                        },resp => {
                            if (resp.code == 1 ) {
                                if (this.paramCont.length == 1) {
                                    this.options.push(
                                        resp.data.list
                                    );
                                } else if (this.paramCont.length == 2){ // 设置顺序
                                    // 暂时只有自定义表单—— 如有其它，添加即可
                                    if (item.param == 'form_no') {
                                        this.options.push(
                                            resp.data.list
                                        );
                                    }
                                    if (item.param == 'scene_key') {
                                        setTimeout(()=>{
                                            this.options.push(
                                                resp.data.list
                                            );
                                        },300);
                                    }
                                }
                            } else if (resp.code == 0) {
                                this.options = [];
                            }
                        });
                        link.param[[item['param']]] = this.ruleForm.jump_url;
                    }
                    if (item.type == 'text') {
                        link.param[[item['param']]] = this.ruleForm.form_name;
                    }

                    link.action = app_action[0];
                    link.target = obj['target'];
                });
            } else if (app_action[0] == 'link_outer') { //外部链接
                this.paramCont = [];
                this.ifSelect = 'text';
                this.param = obj.param;

                //链接赋值
                link = {
                    action: app_action[0],
                    target: obj['target'],
                    param: {
                        url : this.ruleForm.jump_url
                    }
                };
            } else {
                return;
            }
            this.link = link;
        },

        /**
         * @abstract  单链接text_select处理
         */
        getJump (url) {
            let param = {};

            this.$set(this.ruleForm, 'jump_url', url);
            for(let key in this.link['param']) {
                param[key] = url;
            }

            this.link['param'] = param;
            this.$emit('action', JSON.stringify(this.link));

            // console.log(JSON.stringify(this.link), 'app_action');
        },

        /**
         * @abstract  双链接select处理
         */
        getLink () {
            let param = {};

            //保证param字段不重复，否则值会被覆盖
            this.paramCont.map((item,index)=>{
                param[item.param] = this.list[index];
            });

            this.link['param'] = param;

            this.$emit('action', JSON.stringify(this.link));
            // console.log(JSON.stringify(this.link), 'app_action');
        },

        initAction (action) {
            console.log('action', action);

            if(JSON.stringify(JSON.parse(action).param) == '{}') {
                this.setUrlData(JSON.parse(action));
                return;
            }

            let app_action = JSON.parse(action);
            let app = [];

            this.$post('/student/app_action%5Cget_cascade_list', {}, resp => {
                if (resp.code == 1) {
                    resp.data.list.map(item => {
                        if (app_action.action == 'link_outer') {
                            item.target_list.map(itm => {
                                if (itm.target == app_action.target) {
                                    app.push(
                                        app_action.action,
                                        JSON.stringify({
                                            target: app_action.target,
                                            param: [{
                                                param: itm.param_list[0].param,
                                                title: itm.param_list[0].title,
                                                type: itm.param_list[0].form_type
                                            }]
                                        })
                                    );
                                    this.setApp_action(app,itm.param_list[0].title,app_action.param.url,itm.target);
                                }
                            });
                        }

                        if (app_action.action == 'app_page') {
                            let length = Object.keys(app_action.param).length;

                            app = [];
                            app.push(
                                app_action.action,{
                                    target: app_action.target,
                                    param: []
                                }
                            );
                            item.target_list.map((itm,idx) => {
                                if (itm.target == app_action.target) {
                                    itm.param_list.map((option,i) => {
                                        app[1].param.push({
                                            param: option.param,
                                            title: option.title,
                                            type: option.form_type
                                        });
                                    });
                                }
                            });
                            setTimeout(()=>{
                                if (this.isapp) {
                                    this.setSelect_action(app,length,app_action.param);
                                    this.isapp = false;
                                }
                            },50);
                        } else {
                            return;
                        }
                    });
                }
            });
        },

        /**
         * param空回填
         */
        setUrlData (url) {
            console.log(url);
            this.paramCont = [];
            this.ruleForm.app_action = [
                "app_page",
                JSON.stringify({
                    target : url.target,
                    param: []
                })
            ];
            this.link = {
                action :"app_page",
                target : url.target,
                param: {}
            };
        },

        /**
         * select
         */
        setSelect_action (app,length,url) {
            console.log(app,length,url, 'aa');
            if(length === 0) {
                this.link = {
                    "action":"app_page",
                    "target": app[1].target,
                    "param": []
                };
                this.ruleForm.app_action = [
                    "app_page",
                    JSON.stringify({
                        target : app[1].target,
                        param: []
                    })
                ];

                console.log('link', this.link);
            }
            if (length == 1) {
                let list = JSON.parse(JSON.stringify(app));
                let param = JSON.stringify(app[1]);

                this.paramCont = [{
                    type: list[1].param[0]['type'],
                    title: list[1].param[0]['title']
                }];
                list[1] = param;
                this.ruleForm.app_action = list;
                this.options = [];
                for(let i in url) {
                    this.$post('/student/app_action%5Cget_param_item_list',{
                        action: 'app_page',
                        target: JSON.parse(list[1]).target,
                        param: i
                    },resp => {
                        if (resp.code == 1 ) {
                            this.options.push(
                                resp.data.list,
                            );
                        } else if (resp.code == 0) {
                            this.options = [];
                        }
                    });
                    this.$set(this.ruleForm, 'jump_url', url[i]);
                    this.link = {
                        "action":"app_page",
                        "target":JSON.parse(list[1]).target,
                        "param":{
                            [i]: url[i]
                        }
                    };
                }
            } else if (length == 2) {
                let data = JSON.parse(JSON.stringify(app));
                let params = JSON.stringify(app[1]);
                let current = [];

                app[1] = params;
                this.ruleForm.app_action = app;

                this.paramCont = [];
                this.list = [];

                if (typeof(data[1]['param']) == 'object') {
                    data[1]['param'].map((item,index)=>{
                        this.paramCont.push({
                            type: 'select',
                            title: item.title,
                            param: item.param,
                            target: data[1].target
                        });
                    });
                }

                this.options = [];
                for(let i in url) {
                    this.$post('/student/app_action%5Cget_param_item_list',{
                        action: 'app_page',
                        target: data[1].target,
                        param: i
                    },resp => {
                        if (resp.code == 1 ) {
                            // 暂时只有自定义表单—— 如有其它，添加即可
                            if (i == 'form_no') {
                                this.options.push(
                                    resp.data.list,
                                );
                            }
                            if (i == 'scene_key') {
                                setTimeout(()=>{
                                    this.options.push(
                                        resp.data.list,
                                    );
                                },200);
                            }

                        } else if (resp.code == 0) {
                            this.options = [];
                        }
                    });
                    this.link = {
                        action :"app_page",
                        target : data[1].target,
                        param : url
                    };
                    this.list.push(url[i]);
                }
            }
        },

        /**
         * link_outer
         */
        setApp_action (app,title,url,target) {
            this.ruleForm.app_action = app;
            this.$set(this.ruleForm, 'jump_url', url);
            this.param = [{
                type: 'text',
                title: title
            }];
            this.link = {"action":"link_outer","target":target,"param":{"url":url}};
        },
        // {"action":"app_page","target":"custom_form_custom_scene","param":{"form_no":"fm_5507cab254059","scene_key":"掌大精英可见"}}


    }
};
</script>

<style lang="less" scoped>
.action {
    display: flex;
    width: 335px;
    .demo-ruleForm {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        width: 335px;
        .demo-title {
            color: #333;
            font-size: 14px;
            margin-bottom: 10px;
        }
        .el-select-title {
            display: inline-block;
            color: #909399;
            background: #F5F7FA;
            padding: 0 18px;
            border: 1px solid #DCDFE6;
            border-radius: 4px 0 0 4px;
            border-right: none;
            height: 32px;
            white-space: nowrap;
        }
    }
}
</style>
<style lang="less">
.actionTemplate {
    .el-input__inner {
        background: #FBFBFB;
    }
    .el-form-item__content {
        margin-left: 0px !important;
    }
    .task-form-item {
        margin-bottom: 12px;
    }
}
</style>